<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1"/>
        <meta content="telephone=no,email=no" name="format-detection" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta content="yes" name="apple-touch-fullscreen">
		<title>社区</title>
		<link rel="stylesheet" type="text/css" href="Css/layer1.css"/>
		<link rel="stylesheet" type="text/css" href="Css/basic1.css"/>
		<link rel="stylesheet" type="text/css" href="Css/viewer.min.css"/>
		<script src="Scripts/jquery-3.1.1.min.js"></script>
		<script src="Scripts/viewer.min.js"></script>
		<script src="Scripts/layer.js"></script>
		<script src="Scripts/common.js"></script>
	</head>
	<body>
		<div id="header">
			朋友圈
		</div>
		<section id="community">
			<ul class="community-list">
				<li class="item">
					<div class="c-header clearfix">
						<div class="head fl">
							<img src="Images/default.jpg"/>
						</div>
						<div class="title fl">
							<p>昵称</p>
							<p class="publish">3小时前 13:00</p>
						</div>
					</div>
					<div class="c-content">
						天气真好天气真好天气真好天气真好天气真好天气真好天气真好
					</div>
					<ul class="img-list clearfix">
						<li>
							<img src="Images/default.jpg"/>
						</li>
						<li>
							<img src="Images/default.jpg"/>
						</li>
						<li>
							<img src="Images/default.jpg"/>
						</li>
						<li>
							<img src="Images/default.jpg"/>
						</li>
						<li>
							<img src="Images/default.jpg"/>
						</li>
						<li>
							<img src="Images/default.jpg"/>
						</li>
					</ul>
					<div class="c-footer">
						<a class="comment-btn" href="javascript:void(0);">2</a><span class="good-btn">2</span>
					</div>
					<div class="reply-box">
						<dl>
							<dt>
								<div class="c-header clearfix">
									<div class="head fl">
										<img src="Images/default.jpg"/>
									</div>
									<div class="title fl">
										<p>昵称</p>
										<p class="publish">3小时前 13:00</p>
									</div>
									<span class="fr reply-btn">回复</span>
								</div>
								<div class="c-content">
									天气真好天气真好天气真好天气真好天气真好天气真好天气真好
								</div>
							</dt>
							<dd>
								<div class="c-header clearfix">
									<div class="head fl">
										<img src="Images/default.jpg"/>
									</div>
									<div class="title fl">
										<p>昵称回复昵称</p>
										<p class="publish">3小时前 13:00</p>
									</div>
								</div>
								<div class="c-content">
									天气真好天气真好天气真好天气真好天气真好天气真好天气真好
								</div>
							</dd>
							<dd>
								<div class="c-header clearfix">
									<div class="head fl">
										<img src="Images/default.jpg"/>
									</div>
									<div class="title fl">
										<p>昵称回复昵称</p>
										<p class="publish">3小时前 13:00</p>
									</div>
								</div>
								<div class="c-content">
									天气真好天气真好天气真好天气真好天气真好天气真好天气真好
								</div>
							</dd>
						</dl>
						<dl>
							<dt>
								<div class="c-header clearfix">
									<div class="head fl">
										<img src="Images/default.jpg"/>
									</div>
									<div class="title fl">
										<p>昵称</p>
										<p class="publish">3小时前 13:00</p>
									</div>
									<span class="fr reply-btn">回复</span>
								</div>
								<div class="c-content">
									天气真好天气真好天气真好天气真好天气真好天气真好天气真好
								</div>
							</dt>
							<dd>
								<div class="c-header clearfix">
									<div class="head fl">
										<img src="Images/default.jpg"/>
									</div>
									<div class="title fl">
										<p>昵称回复昵称</p>
										<p class="publish">3小时前 13:00</p>
									</div>
								</div>
								<div class="c-content">
									天气真好天气真好天气真好天气真好天气真好天气真好天气真好
								</div>
							</dd>
						</dl>
					</div>
				</li>
				<li class="item">
					<div class="c-header clearfix">
						<div class="head fl">
							<img src="Images/default.jpg"/>
						</div>
						<div class="title fl">
							<p>昵称</p>
							<p class="publish">3小时前 13:00</p>
						</div>
					</div>
					<div class="c-content">
						天气真好天气真好天气真好天气真好天气真好天气真好天气真好
					</div>
					<ul class="img-list clearfix">
						<li>
							<img src="Images/default.jpg"/>
						</li>
						<li>
							<img src="Images/default.jpg"/>
						</li>
						<li>
							<img src="Images/default.jpg"/>
						</li>
						<li>
							<img src="Images/default.jpg"/>
						</li>
						<li>
							<img src="Images/default.jpg"/>
						</li>
						<li>
							<img src="Images/default.jpg"/>
						</li>
					</ul>
					<div class="c-footer">
						<a class="comment-btn" href="#">2</a><span class="good-btn good-on">2</span>
					</div>
				</li>
			</ul>
		</section>
		<script type="text/javascript">
			$('#community ul li .img-list').viewer();
			$("#community").on("click",".comment-btn",function(){
				layer.open({
					title: '评论',
					content:
							   ' <textarea placeholder="我也来说两句..." ></textarea>'+
							    '<span class="submit-btn">提交</span>',
					className:"write-content"
				})
			})
			$("#community").on("click",".reply-btn",function(){
				layer.open({
					title: '回复',
					content:
							   ' <textarea placeholder="我也来说两句..." ></textarea>'+
							    '<span class="submit-btn">提交</span>',
					className:"write-content"
				})
			})	
		</script>
	</body>
</html>
